<!doctype html>
<html>
	<head>
		<title>CalendarJS</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link type="text/css" rel="stylesheet" href="../themes/light/calendar.css" />
	</head>
	<body>
		<h1>Inline calendar</h1>
		<div style="overflow: hidden; margin-bottom: 7px">
			<span id="calendar_1"></span>
		</div>
		<span id="date_1" style="border: dotted 2px #000; padding: 2px 5px;">09/12/2011</span>
				
		<h1>Datepicker</h1>
		<input type="text" name="calendar_2" id="calendar_2" />
				
		<script type="text/javascript" src="../calendar.js"></script>
		<script type="text/javascript">
		var cal_1 = new Calendar({
			element: 'calendar_1',
			inline: true,
			months: 3,
			dateFormat: 'm/d/Y',
			onSelect: function (formated, date, cell) {
				document.getElementById('date_1').innerHTML = formated;
			}
		});
		var cal_2 = new Calendar({
			element: 'calendar_2',
			weekNumbers: true,
			onOpen: function (elem) {
				//do something
			}
		});
		</script>
	</body>
</html>